<template>
    <div>
        <el-row :gutter="20" class="el-row">
            <el-col :span='5'>
                <el-card shadow="hover" class='todoItemHeight'>
                    <div>
                        <div class="an"><h3>部门</h3></div>
                        <div class="an"><el-input clearable placeholder="输入部门名称过滤" v-model="filterText" style='width: 160px;'></el-input></div>
                    </div>

                    <div style='padding-top: 10px;'>
                        <el-tree
                            class="filter-tree"
                            :highlight-current=true
                            :data="deptTree"
                            :props="defaultProps"
                            :default-expand-all='false'
                            :filter-node-method="filterNode"
                            @node-click="treeNodeClick"
                            ref="tree">
                        </el-tree>
                    </div>
                </el-card>
            </el-col>

            <el-col :span='13'>
                <el-card shadow="hover" class='todoItemHeight'>
                    <h3>部门成员</h3>
                    <div style='padding-top: 10px;'>
                        <el-card>
                            <div>
                                <el-input placeholder='姓名/手机号搜索' prefix-icon='el-icon-search' style='width: 160px;margin-right: 10px;'
                                          v-model="keyword" @clear='search' @keydown.enter.native='search'
                                          clearable>
                                </el-input>

                                <el-select style='width: 140px;margin-right: 10px;'
                                           v-model='leaveStatus' v-loading='loading'
                                           @clear='search'
                                           :loading='loading'
                                           filterable clearable placeholder='请选择在职状态'>
                                    <el-option
                                        v-for='item in leaveStatusList'
                                        :key='item.id'
                                        :label='item.name'
                                        :value='item.id'>
                                    </el-option>
                                </el-select>

                                <el-select style='width: 140px;margin-right: 10px;'
                                           v-model='empStatus' v-loading='loading'
                                           :loading='loading'
                                           @clear='search'
                                           filterable clearable placeholder='请选择使用状态'>
                                    <el-option
                                        v-for='item in empStatusList'
                                        :key='item.id'
                                        :label='item.name'
                                        :value='item.id'>
                                    </el-option>
                                </el-select>

                                <el-button icon='el-icon-search' type='primary' @click='search' style='margin-left:10px; float: right'>
                                    搜索
                                </el-button>
                                <el-button icon='el-icon-refresh' type='primary' @click='refreshTable' style='float: right'>
                                    刷新
                                </el-button>
                            </div>
                        </el-card>
                    </div>
                    <div style='padding-top: 10px;'>
                        <el-table @row-dblclick='rowDoubleClick' :row-style="{height:'40px'}" :data='employeeList' border stripe size='mini' height='600'
                                  :header-cell-style="{background:'#f5f7fa',color:'#606266'}" style="font-size: 14px">
                            <el-table-column type='index' label='序号' fixed align='center' width='50'></el-table-column>

                            <el-table-column prop='id' label='用户ID' v-if='false' align='left' :show-overflow-tooltip='true'>
                                <el-tag slot-scope='scope'>{{ scope.row.id }}</el-tag>
                            </el-table-column>

                            <el-table-column prop='name' label='姓名' width='100' align='left' :show-overflow-tooltip='true'>
                                <el-tag slot-scope='scope' @click='handleCopy(scope.row.name)'>{{ scope.row.name }}</el-tag>
                            </el-table-column>

                            <el-table-column prop='phone' v-if='isSuperAdmin' label='手机号' width='115' :show-overflow-tooltip='true'>
                                <el-tag slot-scope='scope' @click='handleCopy(scope.row.phone)'>{{ scope.row.phone }}</el-tag>
                            </el-table-column>

                            <el-table-column prop='username' label='用户名' width='180' align='left' :show-overflow-tooltip='true'>
                                <el-tag slot-scope='scope' @click='handleCopy(scope.row.username)'>{{ scope.row.username }}</el-tag>
                            </el-table-column>

                            <el-table-column prop='avatar' label='头像' width='100' align='center' :show-overflow-tooltip='true'>
<!--                                <el-tag slot-scope='scope' @click='handleCopy(scope.row.avatar)'>{{ scope.row.avatar }}</el-tag>-->
                                <template slot-scope="scope">
                                    <img style='border-radius:36px;' :src="scope.row.avatar"  width="36px;" height="36px;"/>
                                </template>
                            </el-table-column>

                            <el-table-column prop='remark' label='备注' align='left' :show-overflow-tooltip='true'>
                                <el-tag slot-scope='scope' v-show='scope.row.remark !== ""'>{{ scope.row.remark }}</el-tag>
                            </el-table-column>

                            <el-table-column prop='enabled' label='使用状态' width='80' align='center' :show-overflow-tooltip='true'>
                                <template slot-scope='scope'>
                                    <el-tag v-if='!scope.row.enabled' type='warning'>禁用</el-tag>
                                    <el-tag v-if='scope.row.enabled' type='success'>正常</el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column prop='leaveStatus' label='在职状态' width='80' align='center' :show-overflow-tooltip='true'>
                                <template slot-scope='scope'>
                                    <el-tag v-if='!scope.row.leaveStatus' type='warning'>已离职</el-tag>
                                    <el-tag v-if='scope.row.leaveStatus' type='success'>在职</el-tag>
                                </template>
                            </el-table-column>

<!--                            <el-table-column label='操作' align='center' fixed='right' width='100'>
                                <template slot-scope='scope'>
                                    <el-button @click='alert(scope.row)' type='primary'>查看</el-button>
                                </template>
                            </el-table-column>-->
                        </el-table>
                    </div>
                    <div style='display: flex;justify-content: flex-end'>
                        <el-pagination
                            @size-change='sizeChange'
                            @current-change='currentChange'
                            layout='sizes, prev, pager, next, jumper, ->, total, slot'
                            :total='total'>
                        </el-pagination>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="6">
                <el-card shadow="hover" class='todoItemHeight'>
                    <div style='padding-bottom: 10px; color: blue' v-show='isAdmin'>
                        <p>说明：</p>
                        <p>1.授权用户登录：授权后的员工可以登录本系统</p>
                        <p>2.同步钉钉部门及员工：同步钉钉的部门及员工至本系统</p>
                    </div>
                    <div style='padding-bottom: 10px;'>
                        <div>
                            <el-button class='item' type='primary' icon='el-icon-refresh' @click='refresh' v-show='isAdmin'>刷新下拉列表</el-button>
                            <el-button class='item' type='primary' @click='authorize' v-show='isAdmin'>员工授权</el-button>
                            <el-button class='item' type='primary' :disabled="syncStatus" @click='asyncDeptAndEmp' v-show='isSuperAdmin'>同步钉钉部门及员工</el-button>
                        </div>
                        <div v-show='isAdmin'><span style='color: red;' v-show='syncStatus'>同步正在进行中，请耐心等待同步完成后再操作</span></div>
                    </div>

                    <div style='padding-bottom: 15px;'>
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>个人考勤导出</span>
                                <el-button class='item' type='success' style="float: right; padding: 5px 2px;" :disabled="selfDownloading" @click='downloadSelfAttend'>考勤导出</el-button>
                            </div>
                            <div style='padding-top: 15px;'>
                                <el-select :disabled='true'
                                           style='width: 150px;'
                                           v-model='selfId' v-loading='loading'
                                           :loading='loading'
                                           filterable clearable placeholder='请选择员工'>
                                    <el-option
                                        v-for='item in selfList'
                                        :key='item.dtUserId'
                                        :label='item.name'
                                        :value='item.dtUserId'>
                                    </el-option>
                                </el-select>

                                <el-date-picker style='width: 120px;'
                                                :disabled='isSuperAdmin'
                                                class='item'
                                                v-model='selfMonth'
                                                @change='onSelectedSelfMonth($event)'
                                                value-format='yyyy-MM'
                                                type='month'
                                                placeholder='选择年月'>
                                </el-date-picker>
                            </div>
                        </el-card>
                    </div>

                    <div style='padding-bottom: 15px;' v-show='isAdmin'>
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>部门考勤导出</span>
                                <el-button class='item' type='success' style="float: right; padding: 5px 2px;" :disabled="deptDownloading" @click='downloadDeptAttend'>考勤导出</el-button>
                            </div>

                            <div style='padding-top: 15px;'>
                                <el-select style='width: 150px;'
                                           v-model='deptId' v-loading='loading'
                                           @change='onSelectedDept($event)'
                                           :loading='loading'
                                           filterable clearable placeholder='请选择部门'>
                                    <el-option
                                        v-for='item in departmentList'
                                        :key='item.id'
                                        :label='item.name'
                                        :value='item.id'>
                                    </el-option>
                                </el-select>

                                <el-date-picker style='width: 120px;' class='item'
                                                v-model='deptMonth'
                                                @change='onSelectedDeptMonth($event)'
                                                value-format='yyyy-MM'
                                                type='month'
                                                placeholder='选择年月'>
                                </el-date-picker>
                            </div>

                        </el-card>
                    </div>

                    <div style='padding-bottom: 15px;' v-show='isAdmin'>
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span>员工考勤导出</span>
                                <el-button class='item' type='success' style="float: right; padding: 5px 2px;" :disabled="empDownloading" @click='downloadEmpAttend'>考勤导出</el-button>
                            </div>
                            <div style='padding-top: 15px;'>
                                <el-select style='width: 150px;'
                                           v-model='empId' v-loading='loading'
                                           @change='onSelectedEmp($event)'
                                           :loading='loading'
                                           filterable clearable placeholder='请选择员工'>
                                    <el-option
                                        v-for='item in empList'
                                        :key='item.dtUserId'
                                        :label='item.name'
                                        :value='item.dtUserId'>
                                    </el-option>
                                </el-select>

                                <el-date-picker style='width: 120px;'
                                                class='item'
                                                v-model='empMonth'
                                                @change='onSelectedEmpMonth($event)'
                                                value-format='yyyy-MM'
                                                type='month'
                                                placeholder='选择年月'>
                                </el-date-picker>
                            </div>
                        </el-card>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <div>
            <el-dialog v-dialogDrag
                       custom-class="dialogClass"
                       :close-on-click-modal="false"
                       title="员工授权"
                       :visible.sync="authDialogVisible"
                       :before-close='saveCancel'
                       width="18%"
                       top="20vh">

                <el-form :model="authForm" :rules="authRules" ref="authFormRef" label-width="80px"
                         label-position="left">
                    <el-form-item label='员工' prop='dtUserId'>
                        <el-select v-model='authForm.dtUserId' v-loading='loading'
                                   @click='initUserList'
                                   @change='onSelectedFormEmp($event)'
                                   :loading='loading'
                                   filterable clearable placeholder='请选择员工员工授权'>
                            <el-option
                                v-for='item in empList'
                                :key='item.dtUserId'
                                :label='item.name'
                                :value='item.dtUserId'>
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="操作" prop='enabled'>
                        <el-radio-group v-model="authForm.enabled" @change="authTypeChange">
                            <el-radio label="true">授权登录</el-radio>
                            <el-radio label="false">取消授权</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item v-show='isSuperAdmin'>
                        <el-checkbox-group v-model="addSubAdmin">
                            <el-checkbox label="设为子管理员" @change='setSubAdmin'></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="reset">重置</el-button>
                  <el-button type="primary" @click="saveCancel">取消</el-button>
                  <el-button type="primary" @click="save">确定</el-button>
                </span>
            </el-dialog>
        </div>

    </div>

</template>

<script>
import { Message } from 'element-ui';
import {
    changeEmpStatus,
    exportAttend,
    getDeptList, getDeptTree, getEmployeeList,
    getSyncStatus,
    getUserList, resetEmpPwd,
    syncDeptAndEmp
} from '../../api/StaAttendApi';

export default {
    name: 'StaAttend',
    data() {
        return {
            loading: false,

            isAdmin: false,
            isSuperAdmin: false,
            syncStatus: false,

            // 员工自己
            selfList: [],
            selfId: '',
            selfName: '',
            selfMonth: new Date().getFullYear() + '-' + (new Date().getMonth() < 10 ? '0' + new Date().getMonth() : new Date().getMonth()),
            selfDownloading: false,

            // 部门
            departmentList: [],
            deptId: '',
            deptName: '',
            deptMonth: new Date().getFullYear() + '-' + (new Date().getMonth() < 10 ? '0' + new Date().getMonth() : new Date().getMonth()),
            deptDownloading: false,

            // 员工
            empList: [],
            empId: '',
            empName: '',
            empMonth: new Date().getFullYear() + '-' + (new Date().getMonth() < 10 ? '0' + new Date().getMonth() : new Date().getMonth()),
            empDownloading: false,

            authDialogVisible: false,

            addSubAdmin: false,
            authForm: {
                id: '',
                dtUserId: '',
                enabled: 'true',
                subAdmin: false,
            },

            authRules: {
                dtUserId: [
                    {required: true, trigger: 'blur', validator: this.validEmp},
                ],
                enabled: [
                    {required: true, trigger: 'blur', validator: this.validAuthType},
                ],
            },

            // 部门树
            filterText: '',
            deptTree: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },

            empStatusList: [{'id': 1, 'name': '正常'}, {'id': 0, 'name': '禁用'}],
            leaveStatusList: [{'id': 1, 'name': '在职'}, {'id': 0, 'name': '已离职'}],
            keyword: '',
            empStatus: '',
            leaveStatus: '',

            // 表数据
            employeeList: [],
            total: 0,
            pageSize: 10,
            pageNum: 1,
        };
    },

    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },

    computed: {
        user() {
            return JSON.parse(localStorage.getItem('user'));
        },
    },

    mounted() {
        this.initIsAdmin();
        this.initDeptTree();
        this.initDepartments();
        this.initUserList();
        this.initSelfList();
        this.initSyncStatus();
        this.initEmployeeList(1);
    },

    methods: {
        rowDoubleClick(row) {
            if (this.user.isAdmin) {
                this.$confirm('确认重置此员工的登录密码吗?', '重置密码').then(() => {
                    const params = {'id': row.id}
                    resetEmpPwd(params).then(resp => {
                        if (resp && resp.data) {
                            Message.success("重置密码成功！【初始密码为：123456】");
                        } else {
                            Message.error("重置密码失败，请联系系统管理员");
                        }
                    });
                }).catch(ex => {
                    console.error('重置密码异常：' + ex);
                });
            }
        },

        treeNodeClick(data) {
            this.initEmployeeList(data.id);
        },

        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },

        // 搜索
        search() {
            this.pageNum = 1;
            this.initEmployeeList(1);
        },

        initEmployeeList(id) {
            const params = {'deptId': id, 'keyword': this.keyword, 'leaveStatus': this.leaveStatus, 'empStatus': this.empStatus, 'pageNum': this.pageNum, 'pageSize': this.pageSize}
            getEmployeeList(params).then(resp => {
                if (resp && resp.status === 200) {
                    this.employeeList = resp.data.rows;
                    this.total = resp.data.total;
                }
            });
        },

        refreshTable() {
            this.initEmployeeList(1);
            Message.success("刷新成功");
        },

        // 初始化部门树
        initDeptTree() {
            getDeptTree().then(resp => {
                if (resp && resp.status === 200) {
                    this.deptTree = resp.data;
                }
            });
        },

        initSyncStatus() {
            getSyncStatus().then(resp => {
                if (resp) {
                    this.syncStatus = resp.data;
                }
            });
        },

        initSelfList() {
          this.selfList = [{'dtUserId': this.user.dtUserId, 'name': this.user.name}];
          this.selfId = this.user.dtUserId;
          this.selfName = this.user.name;
        },

        initDepartments() {
            getDeptList().then(resp => {
                // let departmentList = [];
                this.loading = true;
                if (resp && resp.status === 200) {
                    // resp.data.forEach(function(dept) {
                    //   departmentList.push({'value': dept.id, 'label': dept.deptName});
                    // });
                    this.departmentList = resp.data;
                    this.loading = false;
                }
            });
        },
        initUserList() {
            getUserList().then(resp => {
                // let departmentList = [];
                this.loading = true;
                if (resp && resp.status === 200) {
                    // resp.data.forEach(function(dept) {
                    //   departmentList.push({'value': dept.id, 'label': dept.deptName});
                    // });
                    this.empList = resp.data;
                    this.loading = false;
                }
            });
        },

        setSubAdmin() {
            if(this.addSubAdmin) {
                this.authForm.subAdmin = true;
            } else {
                this.authForm.subAdmin = false;
            }
        },

        refresh() {
          this.initDepartments();
          this.initUserList();
          this.initSyncStatus();
          Message.success("刷新成功");
        },

        authorize() {
            this.authForm.enabled = 'true';
            this.authDialogVisible = true;
        },

        asyncDeptAndEmp() {
          Message.info("同步开始，请耐心等待同步完成再操作!");
          this.syncStatus = true;
          syncDeptAndEmp().then(resp => {
              this.syncStatus = false;
              if (resp && resp.data) {
                  this.initDepartments();
                  this.initUserList();
                  this.initSyncStatus();
                  this.initDeptTree();
                  Message.success("同步成功！");
              } else {
                  Message.error("同步失败！");
              }
          });
        },

        // 1.导出部门的考勤
        downloadDeptAttend() {
            if (!this.deptId) {
                Message.error('请选择部门!');
                return false;
            }
            if (!this.deptMonth) {
                Message.error('请选择年月!');
                return false;
            }
            let year = this.deptMonth.split("-")[0];
            let month = parseInt(this.deptMonth.split("-")[1]) < 10 ? '0' + parseInt(this.deptMonth.split("-")[1]) : parseInt(this.deptMonth.split("-")[1]);
            const params = { 'type': 1, 'name': this.deptName, 'id': this.deptId, 'year': year, 'month': month };
            this.deptDownloading = true;
            Message.info('下载中，请稍候...');
            exportAttend(params).then(res => {
                if(!res) return
                const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据，并设置文件类型
                let fileName = "【" + this.deptName + "】" + year + '年' + month + '月餐补统计.xlsx'; //（修改下载的文件名）
                if (window.navigator.msSaveOrOpenBlob) { //兼容IE10
                    navigator.msSaveBlob(blob, fileName)
                } else {
                    const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
                    const a = document.createElement('a') //创建a标签
                    a.style.display = 'none'
                    a.href = href // 指定下载链接
                    a.download = fileName //指定下载文件名
                    a.click() //触发下载
                    URL.revokeObjectURL(a.href) //释放URL对象
                }
                this.deptDownloading = false;
                Message.success("导出成功");
                // 这里也可以不创建a链接，直接window.open(href)也能下载
            }).catch(err => {
                console.log(err);
                this.deptDownloading = false;
            });

        },

        // 2.导出自己的考勤
        downloadSelfAttend() {
            if (!this.selfId) {
                Message.error('请选择员工!');
                return false;
            }
            if (!this.selfMonth) {
                Message.error('请选择年月!');
                return false;
            }

            let year = this.selfMonth.split("-")[0];
            let month = parseInt(this.selfMonth.split("-")[1]) < 10 ? '0' + parseInt(this.selfMonth.split("-")[1]) : parseInt(this.selfMonth.split("-")[1]);

            const params = { 'type': 2, 'name': this.selfName, 'id': this.selfId, 'year': year, 'month': month };
            this.selfDownloading = true;
            Message.info("下载中，请稍候...");
            exportAttend(params).then(res => {
                if(!res) return
                const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据，并设置文件类型
                let fileName = "【" + this.selfName + "】" + year + '年' + month + '月餐补统计.xlsx'; //（修改下载的文件名）
                if (window.navigator.msSaveOrOpenBlob) { //兼容IE10
                    navigator.msSaveBlob(blob, fileName)
                } else {
                    const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
                    const a = document.createElement('a') //创建a标签
                    a.style.display = 'none'
                    a.href = href // 指定下载链接
                    a.download = fileName //指定下载文件名
                    a.click() //触发下载
                    URL.revokeObjectURL(a.href) //释放URL对象
                }
                this.selfDownloading = false;
                Message.success("导出成功");
                // 这里也可以不创建a链接，直接window.open(href)也能下载
            }).catch(err => {
                console.log(err);
                this.selfDownloading = false;
            });
        },

        // 3.导出员工的考勤
        downloadEmpAttend() {
            if (!this.empId) {
                Message.error('请选择员工!');
                return false;
            }
            if (!this.empMonth) {
                Message.error('请选择年月!');
                return false;
            }
            console.log(this.empMonth);

            let year = this.empMonth.split("-")[0];
            let month = parseInt(this.empMonth.split("-")[1]) < 10 ? '0' + parseInt(this.empMonth.split("-")[1]) : parseInt(this.empMonth.split("-")[1]);
            const params = { 'type': 2, 'name': this.empName, 'id': this.empId, 'year': year, 'month': month };
            this.empDownloading = true;
            Message.info("下载中，请稍候...");
            exportAttend(params).then(res => {
                if(!res) return
                const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据，并设置文件类型
                let fileName = "【" + this.empName + "】" + year + '年' + month + '月餐补统计.xlsx'; //（修改下载的文件名）
                if (window.navigator.msSaveOrOpenBlob) { //兼容IE10
                    navigator.msSaveBlob(blob, fileName)
                } else {
                    const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
                    const a = document.createElement('a') //创建a标签
                    a.style.display = 'none'
                    a.href = href // 指定下载链接
                    a.download = fileName //指定下载文件名
                    a.click() //触发下载
                    URL.revokeObjectURL(a.href) //释放URL对象
                }
                this.empDownloading = false;
                Message.success("导出成功");
                // 这里也可以不创建a链接，直接window.open(href)也能下载
            }).catch(err => {
                console.log(err);
                this.empDownloading = false;
            });

        },

        // 选择员工，给员工id赋值
        onSelectedEmp(id) {
            if (!id) {
                return false;
            }
            let obj = {};
            obj = this.empList.find(emp => {//这里的departmentList就是上面遍历的数据源
                return emp.dtUserId === id;//筛选出匹配数据
            });
            // console.log(obj);
            // console.log(id);//获取的value
            this.empId = id;
            this.empName = obj.name;
            console.log(this.empId);
        },

        // 选择部门，给部门id赋值
        onSelectedDept(id) {
            if (!id) {
                return false;
            }
            let obj = {};
            obj = this.departmentList.find(dept => {//这里的departmentList就是上面遍历的数据源
                return dept.id === id;//筛选出匹配数据
            });
            // console.log(obj);
            // console.log(id);//获取的value
            this.deptId = id;
            this.deptName = obj.name;
            console.log(this.deptId);
        },

        // 选择年月，给月份赋值
        onSelectedDeptMonth(month) {
            if (month) {
                this.deptMonth = month.toLocaleDateString();
                console.log(this.deptMonth);
            }
        },

        // 选择年月，给月份赋值
        onSelectedEmpMonth(month) {
            if (month) {
                this.empMonth = month.toLocaleDateString();
                console.log(this.empMonth);
            }
        },

        // 选择年月，给月份赋值
        onSelectedSelfMonth(month) {
            if (month) {
                this.selfMonth = month.toLocaleDateString();
                console.log(this.selfMonth);
            }
        },

        reset() {
            this.authForm.dtUserId = '';
            this.authForm.enabled = 'true';
            if(this.$refs["authFormRef"] !== undefined) {
                this.$refs["authFormRef"].resetFields();
            }
            Message.success("重置成功");
        },

        saveCancel() {
            this.authDialogVisible = false;
            this.authForm.dtUserId = '';
            this.authForm.enabled = 'true';
            if(this.$refs["authFormRef"] !== undefined) {
                this.$refs["authFormRef"].resetFields();
            }
        },

        save() {
            this.$refs['authFormRef'].validate((valid) => {
                if (valid) {
                    changeEmpStatus(this.authForm).then(resp => {
                        if (resp && resp.status === 200 && resp.data != null) {
                            Message.success("操作成功");
                            this.initEmployeeList(1);
                            this.authDialogVisible = false;
                        } else {
                            Message.error("操作失败，请检查参数");
                        }
                    });
                }
            });
        },

        onSelectedFormEmp(id) {
            if (!id) {
                return false;
            }
            let obj = {};
            obj = this.empList.find(emp => {//这里的departmentList就是上面遍历的数据源
                return emp.dtUserId === id;//筛选出匹配数据
            });
            // console.log(obj);
            // console.log(id);//获取的value
            this.authForm.dtUserId = id;
            this.authForm.id = obj.id;
            console.log(this.empId);
        },

        authTypeChange(value) {
            this.authForm.enabled = value;
        },

        validEmp(rule, value, callback) {
            if (!value) {
                callback(new Error('请选择员工'));
            }
            callback();
        },

        validAuthType(rule, value, callback) {
            if (!value) {
                callback(new Error('请选择授权类型'));
            }
            callback();
        },

        sizeChange(size) {
            this.pageSize = size;
            this.pageNum = 1;
            this.initEmployeeList(1);
        },
        currentChange(page) {
            this.pageNum = page;
            this.initEmployeeList(1);
        },

        initIsAdmin() {
            this.isSuperAdmin = this.user.isAdmin;
            this.isAdmin = this.user.isAdmin || this.user.isSubAdmin;
            this.selfDownloading = this.user.isAdmin;
        },

        // 复制单元格 公共方法
        handleCopy(obj) {
            this.$copyText(obj).then(
                function() {
                    Message.success('复制成功！');
                },
                function() {
                    Message.error('复制失败，请手动复制！');
                }
            );
        },
    },
};
</script>

<style scoped>
.attend .title {
    margin-bottom: 10px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 16px;
    color: blue;
}

.item {
    padding-right: 8px;
    padding-left: 10px;
}

.an {
    display: inline-block;
    padding-left: 5px;
}

/*设置card高度固定*/
.el-row {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap
}
.el-card {
    min-width: 100%;
    height: 100%;
    margin-right: 20px;
    transition: all .5s;
}
</style>